<template>
	<div class="icon">
		<div  class="swiper ico-swiper">
			<div class="swiper-wrapper">
				<ul class="icon swiper-slide">
					<li v-for="item in iconsList" :key="item.id">
						<router-link to="/">
							<img :src="item.imgURL" />
							<p>{{item.title}}</p>
						</router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Icon',
		data(){
			return{
			iconsList:[
				{id:1,imgURL:require('@/assets/img/icon01.png'),title:'国内游'},
				{id:2,imgURL:require('@/assets/img/icon02.png'),title:'住宿'},
				{id:3,imgURL:require('@/assets/img/icon03.png'),title:'境外游'},
				{id:4,imgURL:require('@/assets/img/icon04.png'),title:'海岛度假'},
				{id:5,imgURL:require('@/assets/img/icon05.png'),title:'国外游'},
				{id:6,imgURL:require('@/assets/img/icon06.png'),title:'出行方式'},
				{id:7,imgURL:require('@/assets/img/icon07.png'),title:'周边游'},
				{id:8,imgURL:require('@/assets/img/icon08.png'),title:'户外游'},
			]
		}
	},
	

}
</script>

<style scoped>
	.swiper{
		border-bottom: 0.03rem solid #d3d3d3;
	}
	.icon{
		overflow: hidden;
		padding: 0.1rem 0 0;
	}
	.icon li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.icon li img{
		width: 1.1rem;
		height: 1.1rem;
	}
	.icon li p{
		color: #000000;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
		font-size: 0.3rem;
	}
	.icon li a{
		text-decoration: none;
	}
	.icons{
		overflow: hidden;
		padding: 0.6rem 0 0;
	}
	.icons li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.icons img{
		height: 1.1rem;
	}
	.icons li p{
		color: #000000;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
		font-size: 0.3rem;
	}
	.icons li a{
		text-decoration: none;
	}
	.icons .tt{
		width: 100%;
		height: 1.2rem;
		text-align: center;
		border-bottom: 0.3rem solid #d3d3d3;
	}
</style>
